<template>
  <div class="h-500rpx w-full text-12rpx">
    <f2-canvas class="f2-canvas" :padding="[60]" @chart-created="handlerCanvasCreate" />
  </div>
</template>

<script lang="ts" setup>

const props = defineProps(['comprehensiveData'])
let chart: any = $ref(null)

const handlerCanvasCreate = (_chart) => {
  chart = _chart
  if (data.length === 10) {
    renderChart()
  }
}

// const data = [
//   { item: '饮食', field: 'food', user: 'user', value: 30 },
//   { item: '饮食', field: 'food', user: 'avg', value: 50 },
//   { item: '作息', field: 'rest', user: 'user', value: 50 },
//   { item: '作息', field: 'rest', user: 'avg', value: 75 },
//   { item: '运动', field: 'sport', user: 'user', value: 50 },
//   { item: '运动', field: 'sport', user: 'avg', value: 80 },
//   { item: '心理', field: 'psychology', user: 'user', value: 40 },
//   { item: '心理', field: 'psychology', user: 'avg', value: 55 },
//   { item: '体质', field: 'physique', user: 'user', value: 60 },
//   { item: '体质', field: 'physique', user: 'avg', value: 66 },
// ]
const data = props.comprehensiveData.map(e => {
  e.value = Number(e.value)
  return e
})
const renderChart = () => {
  if (isNilOrEmpty(chart)) return

  chart.clear()
  chart.coord('polar')
  chart.source(data, {
    value: { min: 0, max: 20, nice: false, tickCount: 6 },
  })

  chart.tooltip(false)
  chart.legend(false)
  chart.axis('item', { label: false })
  chart.axis('value', {
    label: false,
    line: false,
    grid: function grid(text, index, total) {
      if (index === total - 1) {
        return {
          stroke: '#ffffff', //网格线宽度
          lineWidth: 2, //网格线宽度
          strokeOpacity: 1, //网格线透明度
          lineDash: null,
        }
      }
      return {}
    },
  })
  chart.area().position('item*value').color('user', ['#29B897', '#CAE6F6'])
    .style({ fillOpacity: 0.37 })
    .animate({ appear: { animation: 'groupWaveIn' } })
  // chart.line().position('item*value').color('user', ['#2FDAB2', '#CAE6F6'])
  //   .style({ fillOpacity: 0.37 })
  //   .animate({ appear: { animation: 'groupWaveIn' } })

  // 给每一个x轴添加辅助元素，实现x轴信息和value值显示指定效果
  data.filter(e => e.user === 'user').forEach((obj, idx) => {
    let offsetY = 0
    let offsetX = 0
    let alignType = 'center'
    switch (idx) {
      case 0:
        offsetX = -10
        offsetY = 20
        break
      case 1:
        offsetY = 15
        offsetX = -10
        break
      case 2:
        offsetX = -13
        offsetY = -10
        break
      case 3:
        offsetX = -5
        offsetY = -10
        break
      case 4:
        offsetY = 15
        offsetX = -10
        break
    }
    chart.guide().text({
      position: [obj.item, 30], // html 的中心位置， 值为原始数据值，支持 callback
      offsetX,
      offsetY,
      content: obj.item,
      style: {
        fill: '#333333',
        fontSize: 13,
        textAlign: alignType,
        fontWeight: 500,
      },
    })
    chart.guide().text({
      position: [obj.item, 30], // html 的中心位置， 值为原始数据值，支持 callback
      offsetX: offsetX + 25,
      offsetY: offsetY - 2,
      content: obj.value,
      style: {
        fill: '#fc8865',
        fontSize: 15,
        textAlign: alignType,
        fontWeight: 600,
        // fontStyle: 'Italic',
        fontFamily: 'DingTalk JinBuTi',
      },
    })
  })

  chart.render()
}

</script>
